<h1 class="person__main-heading">Person component</h1>
<p class="lead">
    This component has it's own SASS file.
    The name changes after 2 seconds via the use of a Promise.
</p>

<section>
    <h2 class="person__section-heading">
        Using "handlebar" syntax with
        <a href="https://mbest.github.io/knockout.punches/" target="_blank">knockout-punches</a>
    </h2>
    <pre><code>First name: {&#8203;{firstName}&#8203;}</code></pre>

    <ul>
        <li>First name: {{firstName}}</li>
        <li>Last name: {{lastName}}</li>
        <li>Full name: {{fullName}}</li>
    </ul>
</section>

<section>
    <h2 class="person__section-heading">Using old "data-bind" syntax</h2>
    <pre><code>First name: &lt;span data-bind="text: firstName"&gt;&lt;/span&gt;</code></pre>

    <ul>
        <li>
            First name: <span data-bind="text: firstName"></span>
        </li>
        <li>
            Last name: <span data-bind="text: lastName"></span>
        </li>
        <li>
            Full name: <span data-bind="text: fullName"></span>
        </li>
    </ul>
</section>


